import React from 'react'

export default function ControlPanel({ guides, drawingMode, onClear }) {
  return (
    <div className="control-panel">
      <h3>停车场引导系统</h3>
      <div className="status">
        {drawingMode ? '正在绘制引导线...' : '点击画布开始绘制'}
      </div>
      <button onClick={onClear} disabled={guides.length === 0}>
        清除所有引导线
      </button>
      <div className="guide-list">
        <h4>引导线列表 ({guides.length})</h4>
        <ul>
          {guides.map((guide) => (
            <li key={guide.id}>
              引导线 {guide.id.slice(-4)}: ({Math.round(guide.start.x)},
              {Math.round(guide.start.y)}) → ({Math.round(guide.end.x)},
              {Math.round(guide.end.y)})
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
